<template>
  <div class="mine">
    <my-head title="个人中心" :back="false" :mine="true">
      <van-icon name="cross" size="36" class="icon" />
    </my-head>
    <div class="mine-box">
      <div class="mine-top">
        <img
          :src="require('@/assets/images/Pikachu.jpg')"
          class="avator-icon"
        />
        <div class="nick-name" v-if="userInfo">
          <span> {{ userInfo.username }} - {{ userInfo.phone }}</span>
        </div>
        <div class="nick-name" v-else @click="gotopage('login')">立即登录</div>
      </div>
      <ul class="my-order-tab">
        <li data-enter-time="1636963795" data-click-fun="track_f_31531">
          <img
            src=""
            alt=""
          />
          <span
            class="mint-badge is-primary is-size-small"
            style="display: none"
            >99+
          </span>
          <div class="common-p">电影订单</div>
        </li>
        <li data-enter-time="1636963795" data-click-fun="track_f_695269">
          <img
            src=""
            alt=""
          />
          <div class="common-p">商品订单</div>
        </li>
      </ul>

      <div class="infolist">
        <van-cell-group>
          <van-cell icon="phone-o" title="联系我们" is-link />
          <van-cell icon="like-o" title="红包" is-link value="20" />
          <van-cell icon="star-o" title="优惠券" is-link value="10" />
          <template v-if="userInfo">
            <van-cell title="历史记录" icon="user-o" value="查看" is-link />
            <van-cell title="余额" icon="gold-coin" value="288" is-link />
            <van-cell title="点赞" icon="star-o" value="4" is-link />
            <van-cell title="收藏" icon="like-o" value="10" is-link />
            <van-cell
              title="修改密码"
              icon="records"
              is-link
              :to="{ name: 'changepass' }"
            />
            <van-cell title="个人信息" icon="manager-o" is-link />
          </template>
          <van-cell icon="brush-o" title="清除缓存" @click="clearCache" />
          <van-cell icon="setting-o" title="设置" />
        </van-cell-group>
        <div class="logout">
          <van-button v-if="userInfo" @click="logoutaction" class="mbtn" block
            >退出登录</van-button
          >
        </div>
      </div>
    </div>
    <van-overlay :show="show" lock-scroll>
      <div class="mask">
        <van-circle
          v-model="currentRate"
          :rate="100"
          :speed="10"
          v-if="show"
          color="#f50"
        >
          <template #default>
            <van-count-down millisecond format="ss:SS" :time="time" />
          </template>
        </van-circle>
      </div>
    </van-overlay>
  </div>
</template>
  



<script>
export default {
  data() {
    return {
      show: false,
      currentRate: 0,
      time: 10 * 1000,
    };
  },
  watch: {
    currentRate(v) {
      if (v == 100) {
        this.show = false;
        this.$toast("缓存清除成功");
      }
    },
  },
  methods: {
    clearCache() {
      this.show = true;
    },
    logoutaction() {
      this.changeUserInfo(null);
    },
  },
};
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep .van-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    .van-count-down {
      color: #fff;
      font-size: 16px;
    }
  }
}

.mine {
  background: #f4f4f4;
  min-height: 100%;
  .mine-box {
    .logout {
      margin: 16px 0;
      padding: 0 16px;
      .mbtn {
        width: 100%;
      }
    }
  }
  &-top {
    text-align: center;
    margin-top: -44px;
    height: 200px;
    padding-left: 22px;
    padding-top: 64px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    .avator-icon {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
    }
    .nick-name {
      font-size: 20px;
    }
  }

  .my-order-tab {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    li {
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      list-style: none;
      color: #797d82;
      font-size: 14px;
      display: flex;
      align-items: center;
      flex-direction: column;
      img {
        width: 30px;
        height: 30px;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
